<template>
	<view class="post-content-wrapper">
		<!-- 图片轮播 -->
		<view class="image-section">
			<swiper class="image-swiper" :indicator-dots="imageList.length > 1" indicator-color="rgba(255,255,255,0.5)"
				indicator-active-color="#fff" :autoplay="false" :circular="false" @change="onSwiperChange">
				<swiper-item v-for="(image, index) in imageList" :key="index">
					<view class="image-container">
						<image class="detail-image" :src="image" mode="widthFix" @click="previewImage(image, index)">
						</image>
					</view>
				</swiper-item>
			</swiper>

			<!-- 图片指示器 -->
			<view class="image-counter" v-if="imageList.length > 1">
				<text>{{ currentImageIndex + 1 }}/{{ imageList.length }}</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 标题和内容 -->
			<view class="post-content">
				<text class="post-title">{{ postDetail.postTitle }}</text>
				<text class="post-text">{{ postDetail.postContent }}</text>
			</view>

			<!-- 标签 -->
			<view class="tags-section" v-if="tags.length > 0">
				<text class="tag" v-for="tag in tags" :key="tag.id">#{{ tag.tagName }}</text>
			</view>

			<!-- 位置信息 -->
			<view class="location-section" v-if="postDetail.location">
				<uni-icons type="location" size="14" color="#666"></uni-icons>
				<text class="location-text">{{ postDetail.location }}</text>
			</view>

			<!-- 发布时间 -->
			<view class="time-section">
				<text class="time-text">{{ formatTime(postDetail.createdTime) }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineProps, defineEmits } from 'vue'
	import type { TagsInfo } from '@/api/tag/tag.ts'

	// 定义Props类型
	interface PostDetailType {
		id : number;
		postTitle : string;
		postContent : string;
		likeCount : number;
		commentCount : number;
		favoriteCount : number;
		createdTime : string;
		location ?: string;
	}

	// 定义Props
	const props = defineProps<{
		postDetail : PostDetailType;
		imageList : string[];
		tags : TagsInfo[];
	}>()

	// 定义Emits
	const emit = defineEmits<{
		previewImage : [image: string, index: number];
	}>()

	// 当前图片索引
	const currentImageIndex = ref(0)

	// 轮播图切换事件
	const onSwiperChange = (e : any) => {
		currentImageIndex.value = e.detail.current
	}

	// 预览图片
	const previewImage = (current : string, index : number) => {
		currentImageIndex.value = index
		emit('previewImage', current, index)
	}

	// 格式化时间
	const formatTime = (timeStr : string) : string => {
		if (!timeStr) return ''

		const time = new Date(timeStr)
		const now = new Date()
		const diff = now.getTime() - time.getTime()

		const minutes = Math.floor(diff / (1000 * 60))
		const hours = Math.floor(diff / (1000 * 60 * 60))
		const days = Math.floor(diff / (1000 * 60 * 60 * 24))

		if (minutes < 60) {
			return `${minutes}分钟前`
		} else if (hours < 24) {
			return `${hours}小时前`
		} else if (days < 7) {
			return `${days}天前`
		} else {
			return time.toLocaleDateString()
		}
	}
</script>

<style lang="scss" scoped>
	.post-content-wrapper {
		width: 100%;
	}

	// 图片区域
	.image-section {
		position: relative;
		width: 100%;
		height: 60vh;
		overflow: hidden;

		.image-swiper {
			width: 100%;
			height: 100%;

			.image-container {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;

				.detail-image {
					width: 100%;
					max-height: 60vh;
					height: auto;
					object-fit: contain;
				}
			}
		}

		.image-counter {
			position: absolute;
			bottom: 32rpx;
			right: 32rpx;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			padding: 8rpx 16rpx;
			border-radius: 32rpx;
			font-size: 24rpx;
		}
	}

	// 内容区域
	.content-section {
		padding: 32rpx;

		.post-content {
			margin-bottom: 24rpx;

			.post-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				line-height: 1.4;
				margin-bottom: 16rpx;
				display: block;
			}

			.post-text {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				display: block;
			}
		}

		.tags-section {
			margin-bottom: 24rpx;

			.tag {
				display: inline-block;
				background-color: #f8f8f8;
				color: #666;
				font-size: 24rpx;
				padding: 8rpx 16rpx;
				border-radius: 16rpx;
				margin-right: 16rpx;
				margin-bottom: 8rpx;
			}
		}

		.location-section {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			.location-text {
				font-size: 24rpx;
				color: #666;
				margin-left: 8rpx;
			}
		}

		.time-section {
			.time-text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>